<!-- 
  @name: 账号管理
  @date: 2020.3.12
 -->
<template>
	<view class="content">
		<!-- 顶部区域 -->
		<view class="topview">
			<view class="img"><image class="i" :src="info.userPhoto ? info.userPhoto : imgUser"></image></view>
			<view class="name" v-text="info.wxName ? info.wxName : info.userPhone"></view>
		</view>

		<!-- 信息区域 -->
		<view class="details">
			<view class="item">
				<view class="left">手机号</view>
				<view class="num">{{ info.userPhone }}</view>
			</view>
			<view class="item" v-if="info.staffId !== userinfo.staffId">
				<view class="left">账号状态</view>
				<view class="note1" v-show="info.enable === 1">启用</view>
				<view class="note2" v-show="info.enable === 0">禁用</view>
				<switch color="#407CFF" :checked="checked" @change="changeSt" />
			</view>
			<!-- 可用加注站 -->
			<view>
				<view class="select-item" :class="{ active: isSelectAll }" @tap="selectAll">
					全部加注站
					<view class="check_box"><view :class="isSelectAll ? '_ck1' : '_ck2'"></view></view>
				</view>
				<view class="title" @tap="$navigateTo('/pages/common/siteList')">
					<text class="left">部分加注站 ({{sites.length}})</text>
					<view class="arrow_nav"></view>
				</view>
				<view class="site_list">
					<view class="_btn" v-for="(it, ix) in sites" :key="it.siteId">
						{{ it.siteName }}
						<image class="icon-close2" src="/static/images/icon-close2.png" mode="aspectFill" @tap="removeItem(ix)"></image>
					</view>
				</view>
				<view class="list-view-blank"></view>
			</view>
			<!-- <view class="item" @tap="$navigateTo('./details2?staffId=' + staffId +
				'&earnRadio=' + info.earnRadio + '&userIdentity=' + info.userIdentity)">
				<view class="left">账号收益比例</view>
				<view class="num">{{info.earnRadio * 100}}%</view>
				<view class="arrow_nav"></view>
			</view> -->
		</view>

		<!-- 按钮 -->
		<view class="bottom-bar">
			<button class="" @tap="$navigateTo('./setpsd?staffId=' + staffId + '&userIdentity=' + info.userIdentity)">密码重置</button>
			<button class="remove" @tap="removeAccount">删除</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			staffId: '', //账户id
			info: {}, //信息
			checked: false, //switch状态
			imgUser: this.$tmp.IMG_USER, //默认头像
			sites: [],
			isSelectAll: false,
			firstLoad: true
		};
	},
	computed: {
		userinfo() {
			let info = this.$store.state.userinfo;
			if (info) return JSON.parse(info);
		},
		siteList() {
			return this.$store.state.siteList;
		}
	},
	watch: {
		sites: {
			deep: true,
			immediate: true,
			handler(val) {
				this.isSelectAll = !val.length;
				if (this.firstLoad) return;
				let ids = val.map(item => item.siteId);
				this.info.siteIds = ids.toString();
				this.updateAccount(4);
			}
		}
	},
	onLoad(e) {
		this.staffId = e.staffId;
		this.info = JSON.parse(this.$store.state.tmpData);
		this.checked = this.info.enable === 1 ? true : false;
		this.$store.commit('setTmpData', '');
		let tempObj = {};
		this.siteList.forEach(item => {
			tempObj[item.siteId] = item;
		});
		
		let arr = this.info.siteIds && this.info.siteIds.split(',');
		// 回显加注站
		if (Array.isArray(arr)) {
			arr.map(item => {
				if (item) {
					this.sites.push(tempObj[item]);
				}
			});
		}

		uni.$on('common_chooseSite', this.chooseSite);
		uni.$on('setAcc_changeEarnRadio', this.changeEarnRadio);
		this.$nextTick(function() {
			this.firstLoad = false;
		});
	},
	onUnload() {
		uni.$off('setAcc_changeEarnRadio');
		uni.$off('common_chooseSite');
	},
	methods: {
		removeItem(index) {
			this.sites.splice(index, 1);
		},
		selectAll() {
			this.isSelectAll = true;
			this.sites = [];
		},
		//监听选择加注站
		chooseSite(e) {
			console.log(e);
			let obj = {};
			this.sites = this.sites.concat(e);
			this.sites.forEach(item => (obj[item.siteId] = item));
			this.sites = Object.values(obj);
			this.isSelectAll = false;
			obj = null;
		},
		//监听改变收益比例
		changeEarnRadio(e) {
			this.info.earnRadio = e.earnRadio;
		},
		//改变状态
		changeSt(e) {
			let enable = e.target.value ? 1 : 0;
			this.checked = e.target.value;
			this.$http({
				url: this.$api.accountUrl + 'updateaccount',
				data: {
					staffId: this.staffId,
					userIdentity: this.info.userIdentity,
					type: 3,
					enable: enable,
					siteIds: this.info.siteIds
				}
			})
				.then(res => {
					this.info.enable = enable;
					let str = enable === 1 ? '已启用' : '已禁用';
					this.checked = this.info.enable === 1 ? true : false;
					this.$successToast(str);
				})
				.catch(() => {
					this.checked = this.info.enable === 1 ? true : false;
				});
			this.checked = this.info.enable === 1 ? true : false;
			uni.$emit('setAcc_addAccount', {});
		},
		removeAccount() {
			uni.showModal({
				title: '提示',
				content: '您确定要删除此账号吗',
				success: e => {
					if (e.confirm) {
						this.updateAccount(2, () => {
							uni.showToast({
								title: '删除成功'
							});
							setTimeout(uni.navigateBack, 500);
						});
					}
				}
			});
		},
		// 更新状态信息接口，包括 删除，账号状态，添加加注站
		updateAccount(type, cb) {
			this.$http({
				url: this.$api.accountUrl + 'updateaccount',
				data: {
					staffId: this.staffId,
					type: type,
					siteIds: this.info.siteIds
				}
			}).then(res => {
				cb && cb();
				uni.$emit('setAcc_addAccount', {});
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $color-white;
}

/* 顶部区域 */
.topview {
	width: 750rpx;
	height: 280rpx;
	.img {
		width: 100%;
		margin-top: 46rpx;
		text-align: center;
		.i {
			width: 80rpx;
			height: 80rpx;
			border-radius: $border-radius-circle;
		}
	}
	.name {
		width: 100%;
		font-size: 32rpx;
		margin-top: 39rpx;
		text-align: center;
	}
}

/* 信息区域 */
.details {
	width: 750rpx;
	padding-left: 30rpx;
	padding-right: 40rpx;
	border-top: $spacing-col solid $color-bg;
	.item {
		width: 100%;
		padding: 32rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		.left {
			flex: 1;
		}
		.note1 {
			color: $color-primary;
			margin-right: 18rpx;
		}
		.note2 {
			color: #ff3030;
			margin-right: 18rpx;
		}
		.num {
			font-family: $font-family-num;
		}
		.arrow_nav {
			width: 12rpx;
			height: 21rpx;
			margin-left: 24rpx;
		}
	}
}

/* 按钮 */
.bottom-bar {
	position: fixed;
	width: 100%;
	bottom: 0;

	> button:nth-child(1) {
		background-color: #407cff;
		margin: 0 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
	}

	> button:nth-child(2) {
		background-color: #eeeeee;
		margin: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #ff0000;
		margin-bottom: 40rpx;
	}
}

/* 可用加注站 */
.tblank {
	width: 750rpx;
	height: 51rpx;
	background-color: $color-white;
}
.select-item {
	background-color: #ffffff;
	padding: 10rpx 0rpx;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 32rpx;
	&.active {
		color: #407cff;
	}
}
.title {
	// width: 70rpx;
	padding: 20rpx 0rpx;
	background-color: $color-white;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 32rpx;
	.arrow_nav {
		height: 26rpx;
		width: 13rpx;
	}
	.left {
		flex: 1;
	}
}
.site_list {
	margin: 0;
	padding: 20rpx 0rpx;
	height: calc(100vh - 940rpx);
	max-height: unset;
}
.list-view-blank {
	width: 100%;
	height: 30rpx;
	margin-bottom: 120rpx;
	background-color: $color-white;
}
</style>
